<template>
  <div>
    <Head title="基本信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="120"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="计费模板">
      <template #content>
        <div class="detail-wrap">
          <Table
            ref="tableRef"
            :columns="data.columns"
            :handles="data.handles"
            :list="data.detailData.stationTaskTransferPriceInfoList"
            :isPost="false"
            :isPagination="false"
          ></Table>
        </div>
      </template>
    </Head>
    <Head title="电桩调价结果">
      <template #content>
        <div class="detail-wrap1">
          <Table
            ref="tableRef"
            :url="URL_QUERYRESULTBYSTATIONTASK"
            :columns="data.columns1"
            :handles="data.handles1"
            :query="data.query1"
            :params="{ id: id }"
          ></Table>
        </div>
      </template>
    </Head>
    <DialogPrice ref="dialogPriceRef"></DialogPrice>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import DialogPrice from '../components/dialogPrice.vue';
import {
  queryStationTaskTransferPrice,
  URL_QUERYRESULTBYSTATIONTASK,
  batchCheckPrices,
} from '@/service/apis/pile';
import { queryDicByParent } from '@/service/apis/api';
import { getLabel } from '@/utils/utils';

const route = useRoute();
const {
  query: { id },
} = route;

const dialogPriceRef = ref();

queryDicByParent({
  listDtos: [
    // 'stationTaskTransferPriceStatus',
    'priceSet',
    'stationTaskResultStatus',
  ],
}).then((res: any) => {
  if (res) {
    detailForm[2].dic = [...res.priceSet];
    data.query1[2].props.options = [...res.stationTaskResultStatus];
    data.columns1[2].dic = [...res.stationTaskResultStatus];
  }
});

const detailForm = reactive([
  {
    label: '任务名称',
    prop: 'taskName',
  },
  {
    label: '生效时间',
    prop: 'nextTime',
  },
  {
    label: '电桩价格类型',
    prop: 'priceSet',
    comName: 'radio',
    dic: [] as any,
  },
  {
    label: '待调价场站',
    prop: 'orgName',
    comName: 'tree',
    dic: [] as any,
  },
]);
const data = reactive({
  detailData: {} as any,
  columns: [
    {
      prop: 'protocolVersionName',
      label: '协议版本',
    },
    {
      prop: 'costTemplateName',
      label: '计费模板',
    },
  ],
  handles: [
    {
      label: '查看计费 ',
      handle: (row: any) => {
        console.log('查看计费 ---', row);
        dialogPriceRef.value?.show(row.costTemplateId);
      },
    },
  ],
  columns1: [
    {
      prop: 'stationName',
      label: '归属电站',
    },
    {
      prop: 'equipmentCode',
      label: '电桩编码',
    },
    {
      prop: 'result',
      label: '调价结果',
      dic: [] as any,
      template: (row: any) => {
        const name = getLabel(row, data.columns1[2]);
        return row.result !== '3'
          ? `<div style="color:#FA3939;">${name}</div>`
          : `<div style="color:#01C68B;">${name}</div>`;
      },
    },
    {
      prop: 'equipmentStatus',
      label: '设备状态',
      template: (row: any, index: number) => {
        return row.equipmentStatusName
          ? row.equipmentStatus !== '1'
            ? `<div style="color:#FA3939;">${row.equipmentStatusName}</div>`
            : `<div style="color:#01C68B;">${row.equipmentStatusName}</div>`
          : '--';
      },
    },
    {
      prop: 'resultTime',
      label: '设备响应时间',
    },
  ],
  handles1: [
    {
      label: '校价 ',
      permission: 'priceTimeList.price',
      disabledFun: (row: any) => {
        return (
          row.equipmentStatus !== '1' ||
          (row.result !== '3' && row.result !== '4')
        );
      },
      handle: (row: any) => {
        console.log('校价 ---', row);
        batchCheckPrices({ id: row.equipmentId }).then((res: any) => {
          console.log('res---', res);
          ElMessage({
            showClose: true,
            message: '校价成功！',
            type: 'success',
          });
        });
      },
    },
  ],
  query1: [
    {
      label: '归属电站',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入归属电站',
      },
    },
    {
      label: '电桩编码',
      prop: 'equipmentCode',
      comName: 'input',
      props: {
        placeholder: '请输入电桩编码',
      },
    },
    {
      label: '调价结果',
      prop: 'result',
      comName: 'select',
      props: {
        placeholder: '请选择调价结果',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
  ],
});

queryStationTaskTransferPrice({ id: id }).then((res: any) => {
  console.log('res---', res);
  data.detailData = res;
  detailForm[3].dic = res.treeBeanList;
});
</script>